<template>
  <div class="course-learn">
    <!-- 视频播放器 -->
    <div class="video-player">
      <video
        ref="videoPlayer"
        class="video-js"
        controls
        preload="auto"
        poster="https://img01.yzcdn.cn/vant/cat.jpeg"
        data-setup="{}"
      >
        <source :src="currentLesson.videoUrl" type="video/mp4">
      </video>
    </div>

    <!-- 课程信息 -->
    <div class="lesson-info">
      <h2 class="title">{{ currentLesson.title }}</h2>
      <div class="progress">已学习 {{ progress }}%</div>
    </div>

    <!-- 课程目录 -->
    <van-tabs v-model:active="activeTab" sticky>
      <van-tab title="课程目录">
        <div class="chapter-list">
          <van-collapse v-model="activeChapters">
            <van-collapse-item 
              v-for="chapter in chapters" 
              :key="chapter.id"
              :title="chapter.title"
              :name="chapter.id"
            >
              <div 
                v-for="lesson in chapter.lessons" 
                :key="lesson.id"
                class="lesson-item"
                :class="{ active: currentLesson.id === lesson.id }"
                @click="switchLesson(lesson)"
              >
                <van-icon :name="getLessonIcon(lesson)" />
                <span class="lesson-title">{{ lesson.title }}</span>
                <span class="lesson-duration">{{ lesson.duration }}</span>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>
      </van-tab>
      <van-tab title="课程笔记">
        <div class="notes-container">
          <van-field
            v-model="noteContent"
            type="textarea"
            rows="4"
            placeholder="记录笔记..."
            class="note-input"
          />
          <van-button type="primary" block @click="saveNote">保存笔记</van-button>
          
          <div class="notes-list">
            <div v-for="note in notes" :key="note.id" class="note-item">
              <div class="note-header">
                <span class="lesson-name">{{ note.lessonTitle }}</span>
                <span class="note-time">{{ note.time }}</span>
              </div>
              <p class="note-content">{{ note.content }}</p>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()

// 页面状态
const activeTab = ref(0)
const activeChapters = ref([1])
const progress = ref(0)
const noteContent = ref('')

// 视频播放器
const videoPlayer = ref(null)

// 当前课程信息
const currentLesson = ref({
  id: 1,
  title: '1.1 函数的概念',
  videoUrl: 'https://example.com/video.mp4',
  duration: '15:00'
})

// 课程章节数据
const chapters = ref([
  {
    id: 1,
    title: '第一章：函数基础',
    lessons: [
      { 
        id: 1, 
        title: '1.1 函数的概念', 
        duration: '15:00',
        status: 'current' // current, completed, locked
      },
      { 
        id: 2, 
        title: '1.2 函数的性质', 
        duration: '20:00',
        status: 'locked'
      },
      { 
        id: 3, 
        title: '1.3 函数图像', 
        duration: '25:00',
        status: 'locked'
      }
    ]
  },
  {
    id: 2,
    title: '第二章：导数入门',
    lessons: [
      { 
        id: 4, 
        title: '2.1 导数的定义', 
        duration: '18:00',
        status: 'locked'
      },
      { 
        id: 5, 
        title: '2.2 导数的几何意义', 
        duration: '22:00',
        status: 'locked'
      },
      { 
        id: 6, 
        title: '2.3 导数的运算法则', 
        duration: '20:00',
        status: 'locked'
      }
    ]
  }
])

// 课程笔记
const notes = ref([
  {
    id: 1,
    lessonTitle: '1.1 函数的概念',
    content: '函数是描述两个变量之间对应关系的数学概念，要注意区分函数与方程的区别。',
    time: '2023-08-01 15:30'
  },
  {
    id: 2,
    lessonTitle: '1.1 函数的概念',
    content: '函数的三要素：定义域、对应关系、值域。解题时要特别注意定义域的讨论。',
    time: '2023-08-01 15:45'
  }
])

// 获取课程图标
const getLessonIcon = (lesson) => {
  switch (lesson.status) {
    case 'completed':
      return 'checked'
    case 'current':
      return 'play-circle-o'
    case 'locked':
      return 'lock'
    default:
      return 'play-circle-o'
  }
}

// 切换课程
const switchLesson = (lesson) => {
  if (lesson.status === 'locked') {
    showToast('请先完成前面的课程')
    return
  }
  currentLesson.value = lesson
  // 这里应该加载新的视频
}

// 保存笔记
const saveNote = () => {
  if (!noteContent.value.trim()) {
    showToast('请输入笔记内容')
    return
  }

  const newNote = {
    id: notes.value.length + 1,
    lessonTitle: currentLesson.value.title,
    content: noteContent.value,
    time: new Date().toLocaleString()
  }

  notes.value.unshift(newNote)
  noteContent.value = ''
  showToast('笔记保存成功')
}

// 获取课程信息
const fetchCourseData = async () => {
  try {
    const courseId = route.params.id
    if (!courseId) {
      showToast('课程ID不存在')
      router.back()
      return
    }

    // TODO: 调用后端API获取课程信息
    // 这里使用模拟数据
    console.log('加载课程ID:', courseId)
  } catch (error) {
    showToast('获取课程信息失败')
    console.error(error)
  }
}

// 生命周期钩子
onMounted(() => {
  // 获取课程信息
  fetchCourseData()
})

onUnmounted(() => {
  // 清理视频播放器
})
</script>

<style lang="scss" scoped>
@use '../../styles/mixins.scss' as *;

.course-learn {
  min-height: 100vh;
  background-color: #f7f8fa;

  .video-player {
    width: 100%;
    background: #000;
    
    video {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
  }

  .lesson-info {
    background: #fff;
    padding: 16px;
    margin-bottom: 8px;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #323233;
      margin: 0 0 8px;
    }

    .progress {
      font-size: 14px;
      color: #969799;
    }
  }

  .chapter-list {
    .lesson-item {
      @include flex(row, flex-start);
      align-items: center;
      padding: 12px 0;
      font-size: 14px;

      &.active {
        color: #1989fa;

        .van-icon {
          color: #1989fa;
        }
      }

      .van-icon {
        margin-right: 8px;
        color: #323233;
      }

      .lesson-title {
        flex: 1;
        color: #323233;
      }

      .lesson-duration {
        color: #969799;
      }
    }
  }

  .notes-container {
    padding: 16px;

    .note-input {
      margin-bottom: 16px;
    }

    .notes-list {
      margin-top: 20px;

      .note-item {
        background: #fff;
        padding: 16px;
        margin-bottom: 8px;
        border-radius: 8px;

        .note-header {
          @include flex(row, space-between);
          margin-bottom: 8px;

          .lesson-name {
            font-size: 14px;
            color: #323233;
            font-weight: 500;
          }

          .note-time {
            font-size: 12px;
            color: #969799;
          }
        }

        .note-content {
          font-size: 14px;
          color: #666;
          line-height: 1.6;
          margin: 0;
          white-space: pre-wrap;
        }
      }
    }
  }
}
</style>
